<template>
  <div class="library">
    <el-table
      :fit="true"
      height="495px"
      size="medium"
      :data="
        tabledata.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        )
      "
      border
      stripe
    >
      <el-table-column
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
      >
      </el-table-column>
      <el-table-column width="220px">
        <template slot="header" slot-scope="{}">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleCheck(scope.$index, library, pageSize, currentPage)"
            >查看</el-button
          >
          <!-- <el-button
            size="mini"
            type="danger"
            @click.native.prevent="
              handleDelete(scope.$index, library, pageSize, currentPage)
            "
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pageStyle">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :page-sizes="[1, 5, 10, 20]"
        layout="total,prev, pager, next, jumper"
        :total="library.length"
        :page-count="library.length / pageSize"
        hide-on-single-page
      >
      </el-pagination>
    </div>
    <div class="detaildiv">
      <!-- 审核项目详情 -->
      <el-dialog title="审核项目详情" :visible.sync="examVisible">
        <div class="dialogform">
          <!-- {{libraryitem}} -->
          <el-form ref="form" label-width="130px" :inline="false" size="small">
            <el-form-item
              v-for="item in examlib"
              :key="item.label"
              :label="item.label"
            >
              <el-input
                size="medium"
                :disabled="true"
                v-model="item.value"
                :type="item.type"
              ></el-input>
            </el-form-item>
            <el-form-item label="审批意见" size="normal">
              <el-input
                :autosize="{ minRows: 4, maxRows: 9 }"
                type="textarea"
                v-model="advice"
                placeholder="审批意见"
                size="small"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="examVisible = false">取 消</el-button>
          <el-button
            type="danger"
            @click="fail"
            >审核未通</el-button
          >
          <el-button type="primary" @click="pass">审核通过</el-button>
        </span>
      </el-dialog>
      <!-- 三年五年库项目详情 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogwidth: "75%",
      pageSize: 9,
      currentPage: 1,
      search: "",
      examVisible: false,
      libraryVisible: false,
      advice: "",
      // 表格列
      columns: [
        { label: "项目编号", id: "project_no" },
        { label: "项目名称", id: "project_name", width: "300px" },
        { label: "项目类型", id: "project_type" },
        { label: "项目具体类型", id: "specific_type" },
        { label: "项目地址", id: "project_address" },
        { label: "开始时间", id: "audit_time" },
      ],

      // 拿到的库
      library: [],
      // 拿到的对应的行的项目
      libraryitem: {},
      scopesave: {
        i: "",
        p: "",
        c: "",
      },
      examlib: [
        { label: "项目编号", value: "" },
        { label: "项目名称", value: "" },
        { label: "项目地址", value: "" },
        { label: "项目类型", value: "" },
        { label: "项目具体类型", value: "" },
        { label: "项目预计投资规模", value: "" },
        { label: "项目预计经济收益", value: "" },
        { label: "项目预计开工时间", value: "" },
        { label: "项目生命周期", value: "" },
        { label: "项目任务书", value: "" },
      ],
    };
  },
  computed: {
    // 将获取的库的表分页
    tabledata: function () {
      const searchTableInfo = this.search;
   
      if (searchTableInfo) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.library.filter((data) => {
          console.log("success" + data);
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return (
              String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1
            );
          });
        });
      }
      return this.library;
    },
  },
  methods: {
    fail() {
      this.$confirm("此操作将退回审核, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.library.splice(
            this.scopesave.p * (this.scopesave.c - 1) + this.scopesave.i,
            1
          );
          this.$message({
            type: "success",
            message: "已退回",
          });
          this.examVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    pass() {
         this.$confirm("此操作将通过审核, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.library.splice(
            this.scopesave.p * (this.scopesave.c - 1) + this.scopesave.i,
            1
          );
          this.$message({
            type: "success",
            message: "已提交",
          });
          this.examVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 审核库获取

    async examget() {
      let result = await this.$http.get("/data/tb_apply.json");
      this.library = result.data.RECORDS;
      this.columns[0].id = "project_no";
      this.columns[1].id = "project_name";
      this.columns[2].id = "project_type";
      this.columns[3].id = "specific_type";
      this.columns[4].id = "project_address";
      this.columns[5].id = "audit_time";
    },

    // 根据导航栏路由判断显示的库
    init() {
      this.examget();
      this.currentPage = 1;
    },
    //  页面更换
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 删除按钮消息提醒
    // handleDelete(i, l, p, c) {
    //   // console.log(i+l+p+c);
    //   this.$confirm("此操作将删除该文件, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       // 注意：此处应改成行隐藏和状态码转换
    //       l.splice(p * (c - 1) + i, 1);

    //       this.$message({
    //         type: "success",
    //         message: "删除成功!",
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // 查看按钮
    handleCheck(i, l, p, c) {
      // console.log(l[p*(c-1)+i]);
      this.scopesave.i = i;
      this.scopesave.p = p;
      this.scopesave.c = c;
      this.libraryitem = l[p * (c - 1) + i];
      this.advice=localStorage.getItem("advice")  
      this.examlib[0].value = this.libraryitem.project_no;
      this.examlib[1].value = this.libraryitem.project_name;
      this.examlib[2].value = this.libraryitem.project_address;
      this.examlib[3].value = this.libraryitem.project_type;
      this.examlib[4].value = this.libraryitem.specific_type;
      this.examlib[5].value = this.libraryitem.investment;
      this.examlib[6].value = this.libraryitem.revenue;
      this.examlib[7].value = this.libraryitem.start_time;
      this.examlib[8].value = this.libraryitem.life_cycle;
      this.examlib[9].value = this.libraryitem.project_assignment_paper;
      this.examVisible = true;
    },
    searchchange() {
      this.tabledata;
    },
    savelocal(){
        localStorage.setItem("advice",this.advice)
    }
  },
  watch: {
    $route: "init",
    search: "searchchange",
    advice:'savelocal',
    tabledata:function () {  this.currentPage = 1} 
  },
  created() {
    this.init();
  },
};
</script>

<style>
.pageStyle {
  text-align: center;
}
.pageStyle .el-pagination {
  padding: 0px;
}
.detaildiv .el-input.is-disabled .el-input__inner {
  color: black;
}
.dialogform {
  margin: 0px auto;
  width: 80%;
}
</style>